<template>
  <div
    @click="handleClick"
    :class="[
      // 此步为重要的步骤，主要是控制class来控制显示不同的按钮样式
      type ? 'ice-button--' + type : '',
      'button_init',
    ]"
  >
    <i v-if="$slots.default"><slot></slot></i>
  </div>
</template>

<script>
export default {
  name: "Button",
  // 使用prop自定义属性
  props: {
    // type来定义button的类型
    type: {
      type: String,
      default: "",
    },
  },
  computed: {},
  methods: {
    handleClick(evt) {
      this.$emit("click", evt);
    },
  },
};
</script>

<style scoped lang='scss'>
.button_init {
  display: inline-block;
  color: #333;
  background: url("./../../assets/imges/backgroundStripe.png") no-repeat right -1020px;
  padding: 0 5px 0 0;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  i {
    padding: 0 15px 0 20px;
    height: 31px;
    line-height: 30px;
    display: inline-block;
    min-width: 23px;
    background: url("./../../assets/imges/backgroundStripe.png") no-repeat 0 -59px;
    cursor: pointer;
  }
}
.ice-button--information {
  width: 75px;
  height: 31px;
  background: url("./../../assets/imges/btnBackground.png") no-repeat 0 -810px;
  i {
    display: inline-block;
    height: 29px;
    line-height: 29px;
    padding-left: 30px;
    background: none;
  }
}
</style>